<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			div{
				width: 500px;
				height: 500px;
				background-color: #aaffff;
				/*背景图属性*/
				background-image: url(img/蜡笔小新.png);
				/* 背景图大于空间--背景尺寸属性：属性值 ① px % 
				                                     ②contain  等比例缩放图片
													  cover    等比例放大图片
				*/
				background-size: 30% 30%;
				/*背景图小于空间--平铺 */
				background-repeat: no-repeat;
				/*背景图小于空间-->背景定位属性,属性值 X% y%  数值px  数值px 英文*/
				background-position: 20% 0;
				background-position: 100px 0;
				background-position: center center;
			}
			/* 背景图形固定属性：fixed固定模式-->理解：水印 
			先决条件：1.高度空间足够形成滚动条
			         2.引入背景图滚动模式：①等比例放大图片，覆盖整个容器
					                     ②等比例缩放图片，保证图片全部显示在容器中
	                 3.背景图固定属性：background-attachment:fixed  固定到页面上
			*/
			body{
				/*高度：100000px  形成滚动效应 */
				height: 100000px;
				/* 滚动模式-->背景图如何滚动--属性background-size */
				background-size: contain;
				/* 引入图 */
				background-image: url("img/蜡笔小新.png");
				background-repeat: no-repeat;
				/* 水印效果：背景图固定 */
				background-attachment: fixed;
				/*background背景属性：背景图片 背景重复 背景定位 背景尺寸 背景固定；
				 常用写法：background:背景图片 背景重复；
				 */
			}
		</style>
	</head>
	<body>
		Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, doloremque tempore voluptatum tenetur quisquam autem saepe eos harum ipsa aperiam nobis, corporis reprehenderit alias facere fuga dolorem at velit iusto.
		<div></div>
	</body>
</html>